import React from "react";
import { StyledTitle, StyledClosingButton } from "./Modal.styled";
import { useModalContext } from "./Modal.hooks";
import { ReactComponent as Clear } from '../../../images/clear.svg';

/**
 * @function Title - Составной компонент заголовка модального окна.
 * @param { React.HTMLAttributes<HTMLDivElement> } props - Пропсы для компонента Title.
 * @param { React.ReactNode } props.children - Контент для заголовка.
 * @return { React.ReactElement } - Компонент Title.
 */
const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
    { children, ...nextProps }: React.HTMLAttributes<HTMLDivElement>
): React.ReactElement => {

    const context = useModalContext();

    return (
        <StyledTitle {...nextProps}>
            {children}
            {context.displayCloseIcon ? (
                <StyledClosingButton onClick={context.onClose} type="button">
                    <Clear data-testid="close"/>
                </StyledClosingButton>
            ) : null}
        </StyledTitle>
    );
};

export default Title;
